<template>
    <transition>
        <el-dialog :title="dialogType === 'add' ? '添加排课信息' : '修改排课信息'" v-model="showFlag" width="600px" append-to-body
            @close="handleClose" @open="handleOpen">
            <el-form hide-required-asterisk ref="formRef" :rules="formRule" :model="formInfo" label-width="auto"
                style="padding:30px 30px 0 30px">
                <el-form-item label="上课人数" prop="attendence">
                    <el-input placeholder="上课人数" type="number" v-model="formInfo.attendence"></el-input>
                </el-form-item>
                <el-form-item label="上课节次" prop="session">
                    <el-select placeholder="上课节次" v-model="formInfo.session">
                        <el-option v-for="e in session" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程" prop="courseId">
                    <el-select placeholder="课程名称" v-model="formInfo.courseId">
                        <el-option v-for="e in courses" :key="e" :value="e.id"
                            :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="星期几" prop="dayOfWeek">
                    <el-select placeholder="星期几" v-model="formInfo.dayOfWeek">
                        <el-option v-for="e in dayOfWeek" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课教室" prop="classroomId">
                    <el-select placeholder="上课教室" v-model="formInfo.classroomId">
                        <el-option v-for="e in classrooms" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课班级" prop="classId">
                    <el-select placeholder="上课班级" v-model="formInfo.classId">
                        <el-option v-for="e in classes" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授课老师" prop="teacherId">
                    <el-select placeholder="授课老师" v-model="formInfo.teacherId">
                        <el-option v-for="e in teachers" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课院系" prop="departmentId">
                    <el-select placeholder="上课院系" v-model="formInfo.departmentId">
                        <el-option v-for="e in departments" :key="e" :value="e.id" :label="e.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 40px; margin-left: 372px; ">
                    <el-button @click="handleClose" size="mini">取消</el-button>
                    <el-button @click="formSubmit" size="mini" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </transition>
</template>

<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const props = defineProps({
    dialogType: {
        type: String,
        default: 'add'
    }, showDialog: {
        type: Boolean
    },
    applyId: {
        default: ''
    },
    editForm: {
        type: Object
    }
})
const emit = defineEmits(['dialogClosed'])
const showFlag = ref(false)

const dayOfWeek = [
    { label: '星期一', value: '1' },
    { label: '星期二', value: '2' },
    { label: '星期三', value: '3' },
    { label: '星期四', value: '4' },
    { label: '星期五', value: '5' },
    { label: '星期六', value: '6' },
    { label: '星期日', value: '0' },
]
const session = [
    { value: '0', label: '1-2' },
    { value: '1', label: '3-5' },
    { value: '2', label: '6-7' },
    { value: '3', label: '8-9' },
    { value: '4', label: '10-12' },
    { value: '5', label: '13-15' },
]
const courses = ref([
    // courseId, courseName, className
])
const classes = ref([
    // id, name
])
const classrooms = ref([
    // id, name
])
const teachers = ref([
    // id, name
])
const departments = ref([
    // id, name
])

const formRef = ref(null)

const validateAttendence = (rule, value, callback) => {
    let num = parseInt(value)
    if (0 > num || num > 5000) {
        callback(new Error('请输入0-5000数字'))
    }
    callback()
}
const formRule = ref({
    attendence: [
        { required: true, message: '请填写上课人数', trigger: 'blur' },
        { validator:validateAttendence, trigger: 'blur' },
    ],
    session: [
        { required: true, message: '请填写上课节次', trigger: 'blur' }
    ],
    courseId: [
        { required: true, message: '请填写课程', trigger: 'blur' }
    ],
    dayOfWeek: [
        { required: true, message: '请填写星期几', trigger: 'blur' }
    ],
    classroomId: [
        { required: true, message: '请填写上课教室', trigger: 'blur' }
    ],
    classId: [
        { required: true, message: '请填写上课班级', trigger: 'blur' }
    ],
    teacherId: [
        { required: true, message: '请填写授课老师', trigger: 'blur' }
    ],
    departmentId: [
        { required: true, message: '请填写上课院系', trigger: 'blur' }
    ],
})
const formInfo = reactive(
    {
        'attendence': '', 'session': '', 'courseId': '', 'dayOfWeek': '', 'classroomId': '',
        'classId': '', 'teacherId': '', 'departmentId': '',
    },
)
const formSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if (props.dialogType == 'add') {
                api.scheduled_course.add(
                    formInfo.attendence, formInfo.session, formInfo.courseId,
                    formInfo.dayOfWeek, formInfo.classroomId, formInfo.classId,
                    formInfo.teacherId, formInfo.departmentId
                ).then((res) => {
                    ElMessage({
                        message: '添加成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            } else {
                api.scheduled_course.edit(
                    props.applyId, formInfo.attendence, formInfo.session, formInfo.courseId,
                    formInfo.dayOfWeek, formInfo.classroomId, formInfo.classId,
                    formInfo.teacherId, formInfo.departmentId
                ).then((res) => {
                    ElMessage({
                        message: '修改成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            }

        }
    })
}
const handleClose = () => {
    showFlag.value = false
    formRef.value.resetFields()
    emit('dialogClosed')
}
const handleOpen = () => {
    if (props.dialogType === 'edit') {
        formInfo.attendence = props.editForm.attendence
        formInfo.session = props.editForm.session
        formInfo.courseId = props.editForm.courseId
        formInfo.dayOfWeek = props.editForm.dayOfWeek
        formInfo.classroomId = props.editForm.classroomId
        formInfo.classId = props.editForm.classId
        formInfo.teacherId = props.editForm.teacherId
        formInfo.departmentId = props.editForm.departmentId
    }
}

watch(() => props.showDialog, (newValue, oldValue) => {
    showFlag.value = props.showDialog
})


onMounted(() => {
    api.course.get_all().then((res) => {
        courses.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
    api.class_js.get_all().then((res) => {
        classes.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
    api.classroom.get_all().then((res) => {
        classrooms.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
    api.teacher.get_all().then((res) => {
        teachers.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
    api.department.get_all().then((res) => {
        departments.value = res.data.data
    }).catch((err) => {
        console.log(err)
    })
})
</script>